<template>
  <div class="NewContract_box">
    <div class="NewContract_content">
      <div class="header">
        <span style="font-size: 15px;font-weight: bolder">合同新增</span>
        <div>
          <el-button  @click="testImport">测试一键选择数据</el-button>
          <el-button class="el-icon-back" style="color: #bdc7cf" @click="backMenu">返回</el-button>
        </div>
      </div>
      <div class="body">
<!--        <demo></demo>-->
        <el-form ref="form" :model="form" label-width="80px" :rules="form_rules" >
          <div class="form_header">
            <span>请写前阅读一下事项</span>
            <span>(为共建真实可信的销售财务服务平台，请勿发布虚假信息，错误信息，否则影响相关统计数据哦~)</span>
            <span>请填写当年未归档的合同(包括已归档的合同)</span>
            <p>基础信息</p>
            <hr>
          </div>
          <el-form-item label="合同名称" prop="contractName" >
            <el-input v-model="form.contractName" placeholder="请输入合同名称"></el-input>
          </el-form-item>
          <el-form-item label="合同编号" prop="contractNum">
            <el-input v-model="form.contractNum" placeholder="请输入合同编号"></el-input>
          </el-form-item>
          <el-form-item label="客户名称" prop="clientId" class="select_clientName">
            <el-select v-model="form.clientId" placeholder="请选择" >
              <el-option
                clearable
                v-for="(item,index) in contractNameList"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" size="small">增加新客户</el-button>
          </el-form-item>
          <el-row :gutter="20" class="select_multi">
            <el-col :span="8">
              <el-form-item label="BG" prop="bg">
                <el-select v-model="form.bg" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in BGList"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="BU" prop="bu">
                <el-select v-model="form.bu" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in BUList"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行业" prop="industry">
                <el-select v-model="form.industry" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in industryList"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="select_multi">
            <el-col :span="8">
              <el-form-item label="子行业" prop="subIndustry">
                <el-select v-model="form.subIndustry" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in subIndustryList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目类型" prop="projectType">
                <el-select v-model="form.projectType" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in projectTypeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区域" prop="area">
                <el-select v-model="form.area" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in areaList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="select_multi">
            <el-col :span="8">
              <el-form-item label="机构" prop="organization">
                <el-select v-model="form.organization" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in organizationList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="省份" prop="province">
                <el-select v-model="form.province" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in provinceList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
<!--              form.customerManager-->
              <el-form-item label="客户经理" prop="customerManager">
                <el-input v-model="form.customerManager" placeholder="请完善客户经理"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="select_multi">
            <el-col :span="8">
              <el-form-item label="产品线" prop="productLine">
                <el-select v-model="form.productLine" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in productLineList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="乙方单位" prop="bUnit">
                <el-select v-model="form.bUnit" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in bUnitList"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签订时间" prop="signingCreateTime">
                <el-date-picker
                  v-model="form.signingCreateTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="select_multi">
            <el-col :span="8">
              <el-form-item label="签单状态" prop="signingStatus">
                <el-select v-model="form.signingStatus" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in signingStatusList"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维保期" prop="maintenancePeriod">
                <el-select v-model="form.maintenancePeriod" placeholder="请选择" >
                  <el-option
                    clearable
                    v-for="(item,index) in maintenancePeriodList"
                    :key="index"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
<!--              form.currencyType-->
              <el-form-item label="约定货币" prop="currencyType">
                <el-radio-group v-model="form.currencyType" size="medium">
                  <el-radio-button label="RMB" >人民币</el-radio-button>
                  <el-radio-button label="USD" >美元</el-radio-button>
                  <el-radio-button label="JPY" >日元</el-radio-button>
                  <el-radio-button label="GBP" >英镑</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="contract_header">
            <p>合同类型</p>
            <hr>
          </div>
          <div>
            <el-table
              class="contractType"
              :data="form.contractType"
              style="width: 100%">
              <el-table-column
                prop="contractType"
                label="合同类型"
                align="center"
                :width="el_table_width">
                <template slot-scope="scope">
                  <el-form-item prop="contractType" label-width="0">
                    <div class="table_row_contractType">
                      {{scope.row.contractType.name}} <el-checkbox v-model="scope.row.contractType.checked"></el-checkbox>
                    </div>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="contractMoney"
                label="合同金额"
                align="center"
                :width="el_table_width">
                <template slot-scope="scope">
                  <el-form-item prop="checkPass" label-width="0">
                    <el-input v-model="scope.row.contractMoney" clearable placeholder="￥0.0"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="taxRate"
                :width="el_table_width"
                align="center"
                label="税率">
                <template slot-scope="scope">
                  <el-form-item prop="checkPass" label-width="0">
                    <el-select v-model="scope.row.taxRate" clearable  placeholder="请选择">
                      <el-option
                        v-for="(item,index) in taxRateList"
                        :key="index"
                        :label="item.value"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="rateOfTax"
                :width="el_table_width"
                align="center"
                label="税率额">
                <template slot-scope="scope">
                  <el-form-item prop="checkPass" label-width="0">
                    <el-input v-model="scope.row.rateOfTax" clearable placeholder="￥0.0"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="contract_header">
            <p>履约保证金</p>
            <hr>
          </div>
          <el-checkbox v-model="form.performanceSecurity">本合同存在履约保证金</el-checkbox>
          <div>
            <span style="font-size: 16px;font-weight: bolder;">支付信息</span><span style="color: red">(框架、技术服务、维护保障合同之类的，请使用自定义方式配置)</span>
            <el-tabs v-model="PayInfoActiveName" type="border-card">
              <el-tab-pane label="项目进度" name="first">
                <el-table
                  :show-header="false"
                  class="contractType"
                  :data="form.payInfo"
                  style="width: 100%">
                  <el-table-column
                    prop="payType"
                    label="付款类型"
                    align="center"
                    :width="el_table_width_pay">
                    <template slot-scope="scope">
                      <el-form-item prop="payType" label-width="0">
                        <div class="table_row_contractType">
                          {{scope.row.payType.name}} <el-checkbox v-model="scope.row.payType.checked"></el-checkbox>
                        </div>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="payMoney"
                    label="支付额%"
                    align="center"
                    :width="el_table_width_pay">
                    <template slot-scope="scope">
                      <el-form-item prop="payMoney" label-width="0">
                        <el-input v-model="scope.row.payMoney" clearable placeholder="支付额  元"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="accountForContractAmount"
                    label="占合同额%"
                    align="center"
                    :width="el_table_width_pay">
                    <template slot-scope="scope">
                      <el-form-item prop="accountForContractAmount" label-width="0">
                        <el-input v-model="scope.row.accountForContractAmount" clearable placeholder="占合同额  %"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="paymentNode"
                    :width="el_table_width_pay"
                    align="center"
                    label="支付节点">
                    <template slot-scope="scope">
                      <el-form-item prop="paymentNode" label-width="0">
                        <el-input v-model="scope.row.paymentNode" clearable placeholder="支付节点  %"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="termsOfPayment"
                    :width="el_table_width_pay"
                    align="center"
                    label="付款条件">
                    <template slot-scope="scope">
                      <el-form-item prop="termsOfPayment" label-width="0">
                        <el-input v-model="scope.row.termsOfPayment" clearable placeholder="付款条件"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="按自定义方式" name="second">配置管理</el-tab-pane>
            </el-tabs>
            <div style="padding-top: 10px;">
              <span style="color: #eb6d6d;">*</span>付款方式
              <el-radio-group v-model="form.paymentType" size="medium">
                <el-radio-button label="RMB" >人民币</el-radio-button>
                <el-radio-button label="USD" >美元</el-radio-button>
                <el-radio-button label="JPY" >日元</el-radio-button>
                <el-radio-button label="GBP" >英镑</el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="contract_header">
            <p>合同附件</p>
            <hr>
          </div>
          <div class="contract_attachment">
            <el-form-item label="合同正文"  prop="contractBody">
              <el-upload
                class="upload-demo"
                :action="`${url_prefix}/contractInfo/upload`"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="uploadContractSuccess"
                :before-remove="beforeContractRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="contract_attachment_fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="毛利率分析表" prop="marginAnalysis">
              <el-upload
                class="upload-demo"
                :action="`${url_prefix}/contractInfo/upload`"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="uploadMarginAnalysisSuccess"
                :before-remove="beforeMarginAnalysisRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="marginAnalysis_attachment_fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="价格清单表" prop="priceList">
              <el-upload
                class="upload-demo"
                :action="`${url_prefix}/contractInfo/upload`"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="uploadPriceListSuccess"
                :before-remove="beforePriceListRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="priceList_attachment_fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </div>

          <div class="contract_header">
            <p>其他</p>
            <hr>
          </div>
          <div class="contract_other">
            <el-form-item>
              <el-input type="textarea" v-model="form.desc" maxlength="1000" clearable :autosize="{ minRows: 2, maxRows: 6 }" show-word-limit placeholder="请输入附件内容"></el-input>
            </el-form-item>
          </div>
          <div class="contract_submit">
            <span>共<a style="color: red">{{ getContractTypeSum() }}</a>种合同类型</span>
            <span>合同总额￥<a style="color: red">{{ getContractMoneySum() }}</a></span>
            <span>税率总额￥<a style="color: red">{{getContractRateOfTaxSum()}}</a></span>
            <el-button  type="primary" @click="submitForm('form')">立即创建</el-button>
          </div>
        </el-form>

      </div>

    </div>
  </div>
</template>

<script>

import { createContract, uploadRemove } from '@/api/contract/contract'

export default {
  name: 'NewContract',
  data () {
    return {
      form: {
        // 合同名称
        contractName: '',
        // 合同编号
        contractNum: '',
        // 客户id-> 客户名称
        clientId: '',
        // BG
        bg: '',
        // BU
        bu: '',
        // 行业
        industry: '',
        // 子行业
        subIndustry: '',
        // 项目类型
        projectType: '',
        // 区域
        area: '',
        // 机构
        organization: '',
        // 省份
        province: '',
        // 客户经理
        customerManager: '',
        // 产品线
        productLine: '',
        // 乙方单位
        bUnit: '',
        // 签订时间
        signingCreateTime: '',
        // 签订状态
        signingStatus: '',
        // 维保期
        maintenancePeriod: '',
        // 约定货币
        currencyType: 'RMB',
        // el-table 合同类型
        contractType: [
          {
            contractType: {
              name: '软件开发',
              checked: false
            },
            contractMoney: '',
            taxRate: '',
            rateOfTax: ''
          },
          {
            contractType: {
              name: '第三方硬件',
              checked: false
            },
            contractMoney: '',
            taxRate: '',
            rateOfTax: ''
          },
          {
            contractType: {
              name: '第三方软件',
              checked: false
            },
            contractMoney: '',
            taxRate: '',
            rateOfTax: ''
          },
          {
            contractType: {
              name: '系统集成',
              checked: false
            },
            contractMoney: '',
            taxRate: '',
            rateOfTax: ''
          },
          {
            contractType: {
              name: '维护保障',
              checked: false
            },
            contractMoney: '',
            taxRate: '',
            rateOfTax: ''
          },
          {
            contractType: {
              name: '技术服务',
              checked: false
            },
            contractMoney: '',
            taxRate: '',
            rateOfTax: ''
          }
        ],
        // 支付信息
        payInfo: [
          {
            payType: {
              name: '首付款',
              checked: false
            },
            // 支付额
            payMoney: '',
            // 占合同额%
            accountForContractAmount: '',
            // 支付节点%
            paymentNode: '',
            // 付款条件
            termsOfPayment: ''
          },
          {
            payType: {
              name: '上线款',
              checked: false
            },
            // 支付额
            payMoney: '',
            // 占合同额%
            accountForContractAmount: '',
            // 支付节点%
            paymentNode: '',
            // 付款条件
            termsOfPayment: ''
          },
          {
            payType: {
              name: '初测款',
              checked: false
            },
            // 支付额
            payMoney: '',
            // 占合同额%
            accountForContractAmount: '',
            // 支付节点%
            paymentNode: '',
            // 付款条件
            termsOfPayment: ''
          },
          {
            payType: {
              name: '终验款',
              checked: false
            },
            // 支付额
            payMoney: '',
            // 占合同额%
            accountForContractAmount: '',
            // 支付节点%
            paymentNode: '',
            // 付款条件
            termsOfPayment: ''
          },
          {
            payType: {
              name: '尾款',
              checked: false
            },
            // 支付额
            payMoney: '',
            // 占合同额%
            accountForContractAmount: '',
            // 支付节点%
            paymentNode: '',
            // 付款条件
            termsOfPayment: ''
          }
        ],
        // 是否存在履约保证金
        performanceSecurity: false,
        // 付款方式
        paymentType: 'RMB',
        // 合同正文
        contractBody: '',
        // 利润分析表
        marginAnalysis: '',
        // 价格清单表
        priceList: ''
      },
      form_rules: {
        contractName: [
          { required: true, message: '请输入合同名称', trigger: 'blur' },
          { max: 50, message: '长度最大50个字符', trigger: 'blur' }
        ],
        contractNum: [
          { max: 50, message: '长度最大50个字符', trigger: 'blur' }
        ],
        clientId: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        bg: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        bu: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        industry: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        subIndustry: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        projectType: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        organization: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        customerManager: [
          { required: true, message: '请完善客户经理', trigger: 'blur' }
        ],
        productLine: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        bUnit: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        signingCreateTime: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        signingStatus: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        maintenancePeriod: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        // 合同正文
        contractBody: [
          { required: true, message: '请上传', trigger: 'blur' }
        ],
        // 利润分析表
        marginAnalysis: [
          { required: true, message: '请上传', trigger: 'blur' }
        ],
        // 价格清单表
        priceList: [
          { required: true, message: '请上传', trigger: 'blur' }
        ]
      },
      // 客户名称list
      contractNameList: [],
      // BG list
      BGList: [],
      // BU list
      BUList: [],
      // 行业 list
      industryList: [],
      // 子行业 list
      subIndustryList: [],
      // 项目类型 list
      projectTypeList: [],
      // 区域 list
      areaList: [],
      // 机构 list
      organizationList: [],
      // 省份 list
      provinceList: [],
      // 产品线 list
      productLineList: [],
      // 乙方单位 list
      bUnitList: [],
      // 签单状态 list
      signingStatusList: [],
      // 维保期 list
      maintenancePeriodList: [],
      // el-table-width
      // el_table_width: 320,
      el_table_width: window.innerWidth * 0.22,
      el_table_width_pay: 253,
      // el-table 税率列表
      taxRateList: [
        {
          id: 1,
          value: '10%'
        },
        {
          id: 2,
          value: '20%'
        },
        {
          id: 3,
          value: '30%'
        }
      ],
      // 支付信息默认导航
      PayInfoActiveName: 'first',
      // 合同正文文件
      contract_attachment_fileList: [],
      contract_attachment_my_fileList: [],
      // 毛利率文件
      marginAnalysis_attachment_fileList: [],
      marginAnalysis_attachment_my_fileList: [],
      // 价格清单文件
      priceList_attachment_fileList: [],
      priceList_attachment_my_fileList: [],
      url_prefix: process.env.VUE_APP_BASE_API
    }
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    init () {
      const contract = {
        id: 1,
        name: '测试客户'
      }
      // 初始化 维保期
      this.maintenancePeriodList.push({
        id: 1,
        name: '一年'
      })
      this.maintenancePeriodList.push({
        id: 2,
        name: '两年'
      })
      this.maintenancePeriodList.push({
        id: 3,
        name: '三年'
      })
      // 初始化 签单状态
      this.signingStatusList.push({
        id: 1,
        name: '未签单'
      })
      this.signingStatusList.push({
        id: 2,
        name: '已签单'
      })
      for (let i = 0; i < 5; i++) {
        this.contractNameList.push(contract)
        // 初始化乙方单位
        const bUnit = {
          id: 1,
          name: '乙方单位'
        }
        bUnit.name = bUnit.name + (i + 1)
        this.bUnitList.push(bUnit)
        // 初始化产品线
        const productLine = {
          id: 1,
          name: '产品线'
        }
        productLine.name = productLine.name + (i + 1)
        this.productLineList.push(productLine)
        // 初始化省份
        const province = {
          id: 1,
          name: '省份'
        }
        province.name = province.name + (i + 1)
        this.provinceList.push(province)
        // 初始化机构
        const organization = {
          id: 1,
          name: '机构'
        }
        organization.name = organization.name + (i + 1)
        this.organizationList.push(organization)
        // 初始化区域
        const area = {
          id: 1,
          name: '区域'
        }
        area.name = area.name + (i + 1)
        this.areaList.push(area)
        // 初始化项目类型
        const projectType = {
          id: 1,
          name: '项目类型'
        }
        projectType.name = projectType.name + (i + 1)
        this.projectTypeList.push(projectType)
        // 初始化子行业
        const subIndustry = {
          id: 1,
          name: '子行业'
        }
        subIndustry.name = subIndustry.name + (i + 1)
        this.subIndustryList.push(subIndustry)
        // 初始化行业
        const industry = {
          id: 1,
          name: '行业'
        }
        industry.name = industry.name + (i + 1)
        this.industryList.push(industry)
        // 初始化BU
        const BU = {
          id: 1,
          name: 'Bu'
        }
        BU.name = BU.name + (i + 1)
        this.BUList.push(BU)
        // 初始化BG
        const BG = {
          id: 1,
          name: 'BG'
        }
        BG.name = BG.name + (i + 1)
        this.BGList.push(BG)
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验合同类型数据
          if (this.checkContractType()) {
            this.$message.error('请填写合同类型,请注意填写格式且填写完整')
            return false
          }
          // 校验支付信息
          if (this.checkPayInfo()) {
            this.$message.error('请填写支付信息,请注意填写格式且填写完整')
            return false
          }
          createContract(this.doFromData()).then(res => {
            if (res.code === 200) {
              this.$message.success('合同创建成功')
            } else {
              this.$message.error(res.message)
            }
          })
          // console.log(this.form)
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    backMenu () {
      this.$parent.currentComponent = 'contractBoard'
    },
    checkContractType () {
      let j = 0
      for (let i = 0; i < this.form.contractType.length; i++) {
        // eslint-disable-next-line no-mixed-operators,eqeqeq
        if (this.form.contractType[i].contractType.checked) {
          if (this.form.contractType[i].contractMoney === '' ||
            // eslint-disable-next-line eqeqeq
            this.form.contractType[i].taxRate === '' ||
            this.form.contractType[i].rateOfTax === '' ||
            isNaN(this.form.contractType[i].contractMoney) ||
            isNaN(this.form.contractType[i].rateOfTax)) {
            return true
          }
        }
        // 校验选择的一栏数据完成度 和 正确度
        // eslint-disable-next-line eqeqeq
        if (this.form.contractType[i].contractType.checked == true &&
          this.form.contractType[i].contractMoney !== '' &&
          this.form.contractType[i].taxRate !== '' &&
          this.form.contractType[i].rateOfTax !== '' &&
          !isNaN(this.form.contractType[i].contractMoney) &&
          !isNaN(this.form.contractType[i].rateOfTax)
        ) {
          j++
        }
      }
      return j === 0
    },
    checkPayInfo () {
      let j = 0
      for (let i = 0; i < this.form.payInfo.length; i++) {
        // eslint-disable-next-line no-mixed-operators,eqeqeq
        if (this.form.payInfo[i].payType.checked) {
          if (this.form.payInfo[i].payMoney === '' ||
            // eslint-disable-next-line eqeqeq
            this.form.payInfo[i].accountForContractAmount === '' ||
            this.form.payInfo[i].paymentNode === '' ||
            this.form.payInfo[i].termsOfPayment === '' ||
            isNaN(this.form.payInfo[i].payMoney) ||
            isNaN(this.form.payInfo[i].accountForContractAmount) ||
            isNaN(this.form.payInfo[i].paymentNode)) {
            return true
          }
        }
        // 校验选择的一栏数据完成度 和 正确度
        // eslint-disable-next-line eqeqeq
        if (this.form.payInfo[i].payType.checked == true &&
          this.form.payInfo[i].payMoney !== '' &&
          this.form.payInfo[i].accountForContractAmount !== '' &&
          this.form.payInfo[i].paymentNode !== '' &&
          this.form.payInfo[i].termsOfPayment !== '' &&
          !isNaN(this.form.payInfo[i].payMoney) &&
          !isNaN(this.form.payInfo[i].accountForContractAmount) &&
          !isNaN(this.form.payInfo[i].paymentNode)
        ) {
          j++
        }
      }
      return j === 0
    },
    testImport () {
      const newDate = new Date()
      // 合同名称
      this.form.contractName = 'testContractName' + newDate.getFullYear() + (newDate.getMonth() + 1) + newDate.getDate()
      // 合同编号
      this.form.contractNum = 'contractNum' + newDate.getTime()
      // 客户id-> 客户名称
      this.form.clientId = this.contractNameList[Math.floor(Math.random() * 5)].id
      // BG
      this.form.bg = this.BGList[Math.floor(Math.random() * 5)].name
      // BU
      this.form.bu = this.BUList[Math.floor(Math.random() * 5)].name
      // 行业
      this.form.industry = this.industryList[Math.floor(Math.random() * 5)].name
      // 子行业
      this.form.subIndustry = this.subIndustryList[Math.floor(Math.random() * 5)].name
      // 项目类型
      this.form.projectType = this.projectTypeList[Math.floor(Math.random() * 5)].name
      // 区域
      this.form.area = this.areaList[Math.floor(Math.random() * 5)].name
      // 机构
      this.form.organization = this.organizationList[Math.floor(Math.random() * 5)].name
      // 省份
      this.form.province = this.provinceList[Math.floor(Math.random() * 5)].name
      // 客户经理
      this.form.customerManager = 'testCustomerManager' + newDate.getFullYear() + (newDate.getMonth() + 1) + newDate.getDay()
      // 产品线
      this.form.productLine = this.productLineList[Math.floor(Math.random() * 5)].name
      // 乙方单位
      this.form.bUnit = this.bUnitList[Math.floor(Math.random() * 5)].name
      // 签订时间
      this.form.signingCreateTime = newDate
      // 签订状态
      this.form.signingStatus = this.signingStatusList[Math.floor(Math.random() * 2)].name
      // 维保期
      this.form.maintenancePeriod = this.maintenancePeriodList[Math.floor(Math.random() * 3)].name
      // 约定货币
      this.form.currencyType = 'RMB'
      // 合同类型
      this.form.contractType[0].contractType.checked = true
      this.form.contractType[0].contractMoney = 200
      this.form.contractType[0].rateOfTax = 10
      this.form.contractType[0].taxRate = 20
      // 支付信息
      this.form.payInfo[0].payType.checked = true
      this.form.payInfo[0].payMoney = 200
      this.form.payInfo[0].paymentNode = 10
      this.form.payInfo[0].termsOfPayment = '无付款条件'
      this.form.payInfo[0].accountForContractAmount = 10
    },
    getContractTypeSum () {
      if (this.form.contractType != null) {
        let j = 0
        for (let i = 0; i < this.form.contractType.length; i++) {
          if (this.form.contractType[i].contractType.checked) {
            j++
          }
        }
        return j
      }
      return 0
    },
    getContractMoneySum () {
      if (this.form.contractType != null) {
        let MoneySum = 0
        for (let i = 0; i < this.form.contractType.length; i++) {
          if (this.form.contractType[i].contractType.checked) {
            if (this.form.contractType[i].contractMoney != null && this.form.contractType[i].contractMoney !== '') {
              MoneySum += parseFloat(this.form.contractType[i].contractMoney)
            }
          }
        }
        return MoneySum
      }
      return 0
    },
    getContractRateOfTaxSum () {
      if (this.form.contractType != null) {
        let MoneySum = 0
        for (let i = 0; i < this.form.contractType.length; i++) {
          if (this.form.contractType[i].contractType.checked) {
            if (this.form.contractType[i].rateOfTax != null && this.form.contractType[i].rateOfTax !== '') {
              MoneySum += parseFloat(this.form.contractType[i].rateOfTax)
            }
          }
        }
        return MoneySum
      }
      return 0
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview (file) {
      // console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${fileList.length} 个文件`)
    },
    beforeContractRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`).then(() => {
        // 用户点击了确认按钮
        // 执行删除文件的操作
        uploadRemove({
          fileNamePath: this.contract_attachment_my_fileList[0]
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.$message.success('移除文件成功' + file.name)
          } else {
            this.$message.error('移除文件失败' + res.message)
          }
        })
      })
        .catch(() => {
          // 用户点击了取消按钮或关闭对话框
          // 不执行任何操作
          this.$message.error(file.name)
        })
    },
    uploadContractSuccess (response, file, fileList) {
      this.contract_attachment_my_fileList.push(response.message)
      this.form.contractBody = response.message
    },
    beforeMarginAnalysisRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`).then(() => {
        // 用户点击了确认按钮
        // 执行删除文件的操作
        uploadRemove({
          fileNamePath: this.marginAnalysis_attachment_my_fileList[0]
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.$message.success('移除文件成功' + file.name)
          } else {
            this.$message.error('移除文件失败' + res.message)
          }
        })
      })
        .catch(() => {
          // 用户点击了取消按钮或关闭对话框
          // 不执行任何操作
          this.$message.error(file.name)
        })
    },
    uploadMarginAnalysisSuccess (response, file, fileList) {
      this.marginAnalysis_attachment_my_fileList.push(response.message)
      this.form.marginAnalysis = response.message
    },
    beforePriceListRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`).then(() => {
        // 用户点击了确认按钮
        // 执行删除文件的操作
        uploadRemove({
          fileNamePath: this.priceList_attachment_my_fileList[0]
        }).then(res => {
          // eslint-disable-next-line eqeqeq
          if (res.code == 200) {
            this.$message.success('移除文件成功' + file.name)
          } else {
            this.$message.error('移除文件失败' + res.message)
          }
        })
      })
        .catch(() => {
          // 用户点击了取消按钮或关闭对话框
          // 不执行任何操作
          this.$message.error(file.name)
        })
    },
    uploadPriceListSuccess (response, file, fileList) {
      this.priceList_attachment_my_fileList.push(response.message)
      this.form.priceList = response.message
    },
    doFromData () {
      const form = this.form
      form.contractType = form.contractType.forEach(item => {
        return {
          contractType: item.contractType.name,
          contractMoney: item.contractMoney,
          taxRate: item.taxRate,
          rateOfTax: item.rateOfTax
        }
      })
      form.payInfo = form.payInfo.forEach(item => {
        return {
          payType: item.payType.name,
          payMoney: item.payMoney,
          accountForContractAmount: item.accountForContractAmount,
          paymentNode: item.paymentNode,
          termsOfPayment: item.termsOfPayment
        }
      })
      return form
    }
  }
}
</script>

<style scoped>
.NewContract_box{
  background-color: #e9edf7;
  padding-top: 20px;
}
.NewContract_content{
  margin-left: 40px;
  margin-right: 40px;
}
.header{
  display: flex;
  justify-content: space-between;
}
/deep/.select_clientName .el-select .el-input__inner{
  width: 70vw;
}
/deep/.select_clientName .el-button--small{
  margin-left: 30px;
}
/deep/.select_multi .el-select .el-input__inner{
  width: 24vw;
}
.form_header span:nth-child(1),span:nth-child(3){
  color: red;
}
.form_header span:nth-child(1),span:nth-child(2),span:nth-child(3){
  font-size: 9px;
}
.form_header p{
  font-size: 16px;
  font-weight: bolder;
}
.form_header hr{
  border-style: solid;
  border-width: 2px;
  color: #d3d3d3;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.body{
  background-color: #ffffff;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
}
.contract_header{
  font-size: 16px;
  font-weight: bolder;
  padding-top: 5px;
}
.contract_header hr{
  border-style: solid;
  border-width: 2px;
  color: #d3d3d3;
  width: 100%;
  margin-top: 10px;
}
.table_row_contractType{
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;

  width: 100%;
  border-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 1px solid #DCDFE6;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgb(220, 223, 230);
  border-right-color: rgb(220, 223, 230);
  border-bottom-color: rgb(220, 223, 230);
  border-left-color: rgb(220, 223, 230);
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}
/deep/.contractType .el-select .el-input__inner{
  width: 20vw;
}
/deep/.contractType th:nth-child(-n+3).el-table__cell>.cell:after {
  content: '*';
  color: #eb6d6d;
}
/deep/.contractType .el-table__cell{
  padding: 0;
}
/deep/ .contractType .el-form-item{
  margin-bottom: 0;
}
/*/deep/ .contractType .cell .el-form-item__content{*/
/*  !*display: flex;*!*/
/*  !*justify-content: center;*!*/
/*  margin-left: 0px !important;*/
/*}*/

/deep/  .contractType  td.el-table__cell{
  border-bottom: none;
}
/deep/ .contractType .has-gutter .cell{
  background-color: #f5f7fa;
  padding-top: 5px;
  padding-bottom: 5px;
}
.contract_attachment /deep/ .el-form-item__label{
  width: 120px!important;
}
.contract_other{
  padding-top: 10px;
}
.contract_other /deep/ .el-form-item__content{
  margin-left: 0px!important;
}
.contract_other {
  height: 250px;
}
.contract_other /deep/ .el-textarea__inner{
  height: 200px!important;
}
.contract_submit{
  border: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
}
.contract_submit span,a{
  font-size: 10px;
}
.contract_submit span{
  color: #000;
}
</style>
